<script setup lang="ts">
import { ref } from "vue"
import dayjs from "dayjs"
import { inListsApi } from "@/api/bill"
import { sumValuesForName } from "@/utils/common"
const dialogTableVisible = ref(false)
const timer = ref<any>(null)
const enterLists = ref<any[]>([])
const outLists = ref<any>([])
const enterLength = ref<number>(0)
const outLength = ref<number>(0)
const enterCount = ref<number>(0)
const enterPriceCount = ref<number>(0)
const outCount = ref<number>(0)
const outPriceCount = ref<number>(0)
const companyName = ref<string>("")
const billNo = ref<string>("")

const currentTime = ref<string>(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"))

const getNowTime = () => {
  currentTime.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒")
  console.log(currentTime.value)
}
const clearTimer = () => {
  console.log("clearTimer")
  window.clearInterval(timer.value)
  timer.value = null
}
const showClick = (el: any) => {
  inListsEnter(el.enter_ids)
  enterLength.value = el.enter_count
  inListsOut(el.out_ids)
  outLength.value = el.out_count

  companyName.value = el.company_name
  billNo.value = el.billNo

  timer.value = window.setInterval(() => {
    getNowTime()
  }, 1000)
  dialogTableVisible.value = true
}

defineExpose({ showClick })

const handleClose = () => {
  clearTimer()
  enterLists.value = []
  outLists.value = []
  enterCount.value = 0
  enterPriceCount.value = 0
  outCount.value = 0
  outPriceCount.value = 0
  companyName.value = ""
  dialogTableVisible.value = false
  emit("DialogClose", true)
}
const emit = defineEmits(["DialogClose"])

const inListsEnter = (ids: string) => {
  if (ids == "") return []
  inListsApi({
    ids: ids
  }).then((res: any) => {
    enterLists.value = res.data
    enterCount.value = sumValuesForName(res.data, "billAmount")
    enterPriceCount.value = sumValuesForName(res.data, "enter_discount")
  })
}
const inListsOut = (ids: string) => {
  if (ids == "") return []
  inListsApi({
    ids: ids
  }).then((res: any) => {
    outLists.value = res.data
    outCount.value = sumValuesForName(res.data, "billAmount")
    outPriceCount.value = sumValuesForName(res.data, "out_discount")
  })
}
</script>

<template>
  <el-dialog
    v-model="dialogTableVisible"
    title="账单"
    width="80%"
    :before-close="handleClose"
    destroy-on-close
    draggable
  >
    <div>
      <div class="head">
        <div class="heads-left">
          <div class="heads-icons">
            <img src="@/assets/bill/tb.png" alt="" srcset="" />
          </div>
          <div class="company-name">{{ companyName }}</div>
          <!--          <div class="company-title">专业承兑服务</div>-->
        </div>
        <div class="heads-right">{{ currentTime }}</div>
      </div>
      <div class="contents">
        <table width="100%">
          <thead class="table-header">
            <tr>
              <th>序号</th>
              <th>时间</th>
              <th>事项</th>
              <th>票号</th>
              <th>承兑人信息</th>
              <th>票面金额（万元）</th>
              <th>点数</th>
              <th>张数</th>
              <th>扣息金额</th>
              <th>返点</th>
            </tr>
          </thead>
          <tbody>
            <!--            入库-->
            <template v-if="enterLength > 0">
              <template v-for="(item, index) in enterLists" :key="index">
                <tr class="table-row-odd">
                  <td class="tds">{{ index + 1 }}</td>
                  <td class="tds">{{ item.enter_time }}</td>
                  <td class="tds">贴现</td>
                  <td class="tds">{{ item.billNo }}</td>
                  <td class="tds">{{ item.acceptorName }}</td>
                  <td class="tds">{{ item.billAmount }}</td>
                  <td class="tds">{{ item.enter_price / 1000 + "%" }}</td>
                  <td class="tds">1</td>
                  <td class="tds">{{ item.enter_discount }}</td>
                  <td class="tds">&nbsp;</td>
                </tr>
              </template>
              <tr class="table-row-odd">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </template>
            <!--            出库-->
            <template v-if="outLength > 0">
              <template v-for="(item, index) in outLists" :key="index">
                <tr class="table-row-odd">
                  <td class="tds">{{ index + 1 }}</td>
                  <td class="tds">{{ item.out_time }}</td>
                  <td class="tds">买票</td>
                  <td class="tds">{{ item.billNo }}</td>
                  <td class="tds">{{ item.acceptorName }}</td>
                  <td class="tds">{{ item.billAmount }}</td>
                  <td class="tds">{{ item.out_price / 1000 + "%" }}</td>
                  <td class="tds">1</td>
                  <td class="tds">&nbsp;</td>
                  <td class="tds">{{ item.out_discount }}</td>
                </tr>
              </template>
              <tr class="table-row-odd">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </template>
            <tr class="table-row-odd">
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td class="tds">
                <span v-if="enterCount < outCount"> 合计收款 </span>
                <span v-else-if="enterCount > outCount"> 还需回款金额 </span>
                <span v-else> &nbsp; </span>
              </td>
              <td class="tds">
                <span v-if="enterCount < outCount">
                  {{ outCount - enterCount }}
                </span>
                <span v-else-if="enterCount > outCount">
                  {{ enterCount - outCount }}
                </span>
                <span v-else> 已走平 </span>
              </td>
              <td>&nbsp;</td>
              <td class="tds">
                <span v-if="enterPriceCount < outPriceCount">合计返点 </span>
                <span v-else-if="enterPriceCount > outPriceCount"> 合计扣息金额 </span>
                <span v-else> &nbsp; </span>
              </td>
              <td class="tds">
                <span v-if="enterPriceCount > outPriceCount"> {{ enterPriceCount - outPriceCount }} </span>
                <span v-else> &nbsp; </span>
              </td>
              <td class="tds">
                <span v-if="enterPriceCount < outPriceCount"> {{ outPriceCount - enterPriceCount }} </span>
                <span v-else> &nbsp; </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.head {
  height: 80px;
  width: 100%;
  background: radial-gradient(circle, #fcccbc, #f4ba97);
  display: flex;
  justify-content: space-between;
}
.heads-left {
  display: flex;
}
.heads-left .company-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  font-family: Inter, "Microsoft YaHei", serif;
}
.heads-left .company-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 22px;
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0d84ff;
  font-family: Inter, "Microsoft YaHei", serif;
}
.heads-icons {
  width: 80px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.heads-icons img {
  width: 50px;
}
.heads-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 16px;
}

.contents .table-header {
  background-color: #eee;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
  padding: 10px;
}
.contents .table-row-odd {
  background-color: #f5f5f5;
  font-size: 20px;
  line-height: 30px;
}
.contents .tds {
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  padding: 10px;
}
</style>
